﻿<template>
  <div class="chooseCoupon">
		
		<div class="nav">
			<a @click="counponType=1">
				<span :class="{active: counponType==1}">未使用</span>
			</a>
			<a @click="counponType=0">
				<span :class="{active: counponType==0}">已使用</span>
			</a>
			<a @click="counponType=2">
				<span :class="{active: counponType==2}">已过期</span>
			</a>
		</div>
		
		<div class="coupons">
			<div class="availableCoupon" v-if="counponType==1">
				<div class="couponOne clearfix" v-for="(item, index) in availableCouponArr" @click="markShow=index">
					<div class="denomination">
						<div><span>￥</span>100</div>
						<p>满减券</p>
					</div>
					<div class="useCondition">
						<div>双十一优惠券「箱包品类」</div>
						<p>订单满1000可用</p>
						<p>有效期：2017.09.05—2017.09.06</p>
						<span class="mark" v-if="markShow==index"></span>
					</div>
				</div>
				<p v-if="availableCouponArr.length>0">没有更多了~</p>
				<div class="noCoupon" v-if="availableCouponArr.length==0">
					<img src="../img/coupon/e_youhuiquan_kong_icon@2x.png" alt="" />
					<p>您还没有券哦~</p>
				</div>
		  </div>
		  
		  <div class="usedCoupon" v-if="counponType==0">
				<div class="couponOne clearfix" v-for="(item, index) in unavailableCouponArr" :class="{used: item.isUsed==1}">
					<div class="denomination">
						<div><span>￥</span>100</div>
						<p>满减券</p>
					</div>
					<div class="useCondition">
						<div>双十一优惠券「箱包品类」</div>
						<p>订单满1000可用</p>
						<p>有效期：2017.09.05—2017.09.06</p>
					</div>
				</div>
				<p v-if="unavailableCouponArr.length>0">没有更多了~</p>
				<div class="noCoupon" v-if="unavailableCouponArr.length==0">
					<img src="../img/coupon/e_youhuiquan_kong_icon@2x.png" alt="" />
					<p>您还没有券哦~</p>
				</div>
		  </div>
		  
		  <div class="usedCoupon" v-if="counponType==2">
				<div class="couponOne clearfix" v-for="(item, index) in expiredCouponArr" :class="{expired: item.isExpired==1}">
					<div class="denomination">
						<div><span>￥</span>100</div>
						<p>满减券</p>
					</div>
					<div class="useCondition">
						<div>双十一优惠券「箱包品类」</div>
						<p>订单满1000可用</p>
						<p>有效期：2017.09.05—2017.09.06</p>
					</div>
				</div>
				<p v-if="expiredCouponArr.length>0">没有更多了~</p>
				<div class="noCoupon" v-if="expiredCouponArr.length==0">
					<img src="../img/coupon/e_youhuiquan_kong_icon@2x.png" alt="" />
					<p>您还没有券哦~</p>
				</div>
		  </div>
		</div>
		
  </div>
</template>

<script src="../js/views/myCoupon.js"></script>

<style scoped>
	@import '../css/views/myCoupon.css'
</style>
